<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .head{
            width: 100%;
            /* height: 5.333333rem; */
            /* background-color: rgb(216, 83, 83); */
            
            /* text-align: center; */
            /* line-height: 2.666667rem; */
            position: fixed;
        }
        .foot{
            width: 100%;
            height: 2.666667rem;
            background-color: white;
        }
        .haha{
            display: flex;
            margin-bottom: .533333rem;
            align-items: center;
            margin-left: .8rem;
            
        }
        .a{
            margin-left: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: .266667rem;
            font-size: 14px;
            width: 13.333333rem;
        }
        .b{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        button{
            background-color: red;
            color: white;
            width: 2.666667rem;
            height: 1.333333rem;
            border: none;
            margin-left: 2.666667rem;
            
        }
        
        .maoyan{
            color: white;
        }
        .one{
            display: flex;
            justify-content: center;
            width: 100%;
            background-color: rgb(216, 83, 83);
            height: 2.666667rem;
            align-items: center;
            
            
        }
        .one img{
            width: .533333rem;
            height: .8rem;
            
        }
        .two{
            width: 100%;
            height: 2.666667rem;
            background-color: white;
            display: flex;
            align-items: center;
            font-size: 14px;
            border-bottom: 1px solid grey;
        }
        .two img{
            width: 3.2rem;
            height: 1.6rem;
            margin-left: .8rem;
        }
        .dian{
            margin-left: 6.666667rem;
        }
        .open{
            margin-left: 1.333333rem;
            color: rgb(180, 84, 84);
            font-weight: 500;
        }
        .three img{
            width: 1.333333rem;
            height: 1.066667rem;
        }
        .three{
            width: 100%;
            height: 2.133333rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom:1px solid grey ;
            background-color: white;
            

        }
        .t1{
            color: #666;
            
        }
        .t0{
            color: #777;
            font-weight: 700px;
        }
        .foot{
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            font-size: 12px;
            margin-top: .266667rem;
            justify-content: space-around;
            align-items: center;
        }
        .foot img{
           width: 1.333333rem;
           height: 1.333333rem;
        }
        .one img{
            margin-left: 5.333333rem;
        }
        .qq{
            font-size: 15px;
        }
        .ww{
            color: #666;
        }
        
       
       
      
            
    </style>
</head>
<body>
    <div id="app">
        <myheader></myheader>
        <mycon :list='list'></mycon>
        <myfooter></myfooter>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script>
        var myheader={
            template:`<div class='head'>
                <div class='one'>
                        <div class='maoyan'>猫眼电影</div>
                        
                        
                </div>  
                <div class='two'>
                        <img src='	https://p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png'/>
                        <div class='dian'>发现最新最热电影</div>
                        <div class='open'>打开APP></div>
                    </div>
                <div class='three'>
                    <div class='t1'>深圳</div>
                    <div class='t0'>热映</div>
                    <div class='t0'>影院</div>
                    <div class='t0'>待映</div>
                    <div class='t0'>经典电影</div>
                    <img src='../img/a.JPG'/>
                    </div>    

                </div>`
        }
        var mycon={
            props:["list"],
            template:`<div>
                <ul>
                    <li v-for='item in list' class='haha'><img :src="item.img" />
                            <div class='a'>
                                <div class='qq'>{{item.nm}}</div>
                                <div class='ww'>观众评：{{item.sc}}</div>
                                <div class='ww'>主演：{{item.star}}</div>
                                <div class='ww'>{{item.showInfo}}</div>
                                
                            </div>
                            <button>购票</button>
                        </li>
                    
                </ul>    
                </div>`
        }
        var myfooter={
            template:`<div class='foot'>
                    <div>
                        <img src='../img/a1.JPG'/>
                        
                        </div>
                    <div>
                        <img src='../img/s.JPG'/>
                        <div></div>
                        </div>
                    <div>
                        <img src='../img/s2.JPG'/>
                        
                        </div>
                    <div>
                        <img src='../img/y.JPG'/>
                        
                        </div>
                    <div>
                        <img src='../img/wo.JPG'/>
                        
                        </div>
                </div>`
        }
        var app=new Vue({
            el:'#app',
            data:{
                list:[]
            },
            mounted(){
                
                axios.get('list.json').then(res=>{
                    console.log(res);
                    this.list=res.data.movieList
                }),
                this.list.forEach(item => {
                    item.img = item.img.replace("w.h", "64.90");
                })
               
            },
            components:{
                myheader,mycon,myfooter
            }
            
        })
    </script>

</body>
</html>